<!--
 * @Descripttion: 
 * @Author: zhanyi
 * @Date: 2021-10-22 10:46:45
 * @FilePath: \wczd-mobile\src\pages\task\task-edit.vue
-->
<template>
  <div class="task-edit">
    <div class="firstTopPanel">
      <div class="top-block">
        <image @click="backClick" class="back-btn" src="../../static/back-btn.png"></image>
        <div class="title">{{isInspection==='2'?'查看详情':'填写排查结果'}}</div>
      </div>
      <div class="ul-tag">
        <div v-for="(item,index) in tagNav" class="li-tag" :class="[{active: tag===item.value}]" @click="changeTag(item.value)">{{item.name}}</div>
      </div>
    </div>
    <div class="container" ref="container">
      <div v-show="tag==='1'" class="container-edit">
        <taskWrite :objUniqueCode="objUniqueCode" :nodeId="nodeId" :taskId="taskId"></taskWrite>
      </div>
      <div v-show="tag==='2'">
        <taskInfo :objUniqueCode="objUniqueCode"></taskInfo>
      </div>
    </div>
  </div>
</template>

<script>
import secondTopPanel from '@/pages/component/top-panel/secondTopPanel.vue'
import evanForm from '@/components/evan-form/evan-form.vue'
import evanFormItem from '@/components/evan-form-item/evan-form-item.vue'
import uniNumberBox from '@/components/uni-number-box/uni-number-box.vue'
import sxwhRadio from '@/pages/component/sxwh-radio/sxwh-radio.vue'
import { getWhInspectionTask, commitTaskNodeCheckInfo, getInspectionDetailByUniqueCode } from "@/api/task";
import ImageUpload from "@/pages/component/imageUpload/imageUpload.vue";
import taskInfo from "./task-info.vue";
import taskWrite from "./task-write.vue";

export default {
  name: 'task-edit',
  components: { secondTopPanel, evanForm, evanFormItem, ImageUpload, uniNumberBox, sxwhRadio, taskInfo, taskWrite },
  data () {
    return {
      tag: '',
      tagNav: [],
      radioValue: '',
      nodeId: '',
      taskId: '',
	  isInspection: '',
      formData: {
        id: null,
        isInspection: '0',
        taskId: null,
        roadId: null,
        nodeId: null,
        objUniqueCode: null,
        whInspectionTaskResDetailList: [],
      },
      taskInfo: {
        taskStartTm: null,
        taskEndTm: null,
        taskName: null,
        nodeName: null,
      }
    }
  },
  onLoad: function (option) {
    this.nodeId = option.nodeId
    this.taskId = option.taskId
    this.objUniqueCode = option.objUniqueCode
	this.isInspection = option.isInspection

    if (this.taskId) {
      this.tagNav = [{
        name: '隐患排查',
        value: '1'
      }, {
        name: '点位信息',
        value: '2'
      }]
      this.tag = "1"
    }
    else {
      this.tagNav = [{
        name: '点位信息',
        value: '2'
      }]
      this.tag = "2"
    }
  },
  created () {
  },
  computed: {
  },
  methods: {
    backClick () {
      uni.navigateBack()
    },
    changeTag (tag) {
      this.tag = tag
      uni.pageScrollTo({
        duration: 0,
        //滚动到实际距离是元素距离顶部的距离减去最外层盒子的滚动距离
        scrollTop: 0
      })
    },
  },
}
</script>

<style scoped lang="scss">
.firstTopPanel {
  width: 100%;
  background: white;
  background-size: 100% 100%;
  position: fixed;
  background: white;
  top: 0;
  left: 0;
  z-index: 100;
  .top-block {
    padding-top: 20upx;
    padding-bottom: 20upx;
    display: flex;
    padding-left: 20upx;
    align-items: center;

    .back-btn {
      width: 56upx;
      height: 56upx;
    }
    .title {
      padding-top: 0;
      padding-left: 15upx;
      font-size: 40upx;
      font-weight: bold;
    }
  }
}

.task-edit {
  letter-spacing: 1upx;
  padding-top: 170upx;
  .container {
    margin-top: 20upx;
    .container-edit {
      background: white;
      padding-bottom: 50upx;
    }
  }
}
.evan-form {
  border-radius: 8upx;
  padding: 20upx 30upx;
  .form-input {
    width: 100%;
    text-align: right;
    color: #777777;
  }
  .num-compute {
    /deep/.evan-form-item-container__main {
      justify-content: end !important;
    }
  }
}
/deep/.evan-bottom .evan-form-item-container {
  border: 0;
}
.factor-name {
  font-weight: 600;
  padding-bottom: 15upx;
  color: #000000;
}
.btn {
  margin: 40upx 0;
  display: flex;
  .submit {
    width: 40%;
    line-height: 80upx;
  }
  .temp-save {
    width: 40%;
    line-height: 80upx;
  }
}

/deep/.inspection-contentEmpty {
  background-color: rgba(246, 73, 18, 0.03);
  // background-color: #fff9f8;
}
/deep/.inspection-content {
  border-radius: 10upx;
  padding: 10upx;
  color: #777777;
  .inspection-radio {
    display: flex;
    justify-content: center;
    width: 80%;
    margin: auto;
    border-top: 1upx solid #f1f1f1;
    padding-top: 20upx;
    padding-bottom: 30upx;
    margin-top: 10upx;
    display: flex;
    .radio {
      padding: 0 15upx;
      display: flex;
      .uni-radio-input {
        width: 36upx;
        height: 36upx;
      }
      .radio-image {
        width: 40upx;
        height: 40upx;
        margin-right: 10upx;
      }
    }
  }
}
.line-title {
  font-weight: 600;
  color: #000000;
  font-size: 28upx;
}
.form-remark {
  text-align: left;

  /deep/ .uni-textarea-wrapper {
    min-height: 40px;
  }
}
.ul-tag {
  display: flex;
  border-top: 1px solid #f5f5f5;
  border-bottom: 1px solid #f5f5f5;
  .li-tag {
    flex: 1;
    text-align: center;
    padding: 10upx;
    background: white;

    &.active {
      background: #009fdf;
      color: white;
    }
  }
}
</style>
